<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/axios.min.js"></script>

</head>
<script>
    function checkName() {
        // let obj = {
        //     name: $("userName").value
        // }
        // axios.get("/test/checkName", {params: obj}).then(e => check(e.data))
        //
        // // 向服务器发送get请求
        // // 访问controller中的服务器url地址，参数1为服务器url地址，参数2为表单数据（封装为js对象形式
        // // axios.get("/test/checkName", {
        // //     params: {
        // //         //此处必须和客户端形参值一样
        // //         name: $("userName").value
        // //     }
        // // }).then(e => check(e.data));

        //------------------使用post方式进行发送请求
        let pramObj = new URLSearchParams();
        pramObj.append("name", $("userName").value)
        axios.post("/test/checkName", pramObj).then(e => {
            check(e.data);
        });

    }

    function check(info) {
        if (info == "yes") {
            $("infoDiv").innerHTML = "pass";
            $("infoDiv").style.color = "green";
        } else {
            $("infoDiv").innerHTML = "noPass";
            $("infoDiv").style.color = "red";
        }
    }

    function $(id) {
        return document.getElementById(id);
    }

</script>

<body>
<form action="add">
    用户名 <input type="text" id="userName" name="userName" onblur="checkName()"><br>
    <div id="infoDiv"></div>
    生日 <input type="date" name="birthday" id="birthday"><br>
    <input type="submit" value="点击添加">
</form>

</body>
</html>